<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="first" name="yo">class - first - 1</div>
  <div class="first">
    <div>inner</div>
  </div>
  <div id="second">
    <p>123</p>
  </div>
</body>
</html>

<script>
// 单词：
  // collect ->  收集
  // list ->  列表
  // node -> 节点 
// DOM ， html 相关的标签：「增、删、改、查」 - 关于 DOM

// 「查」
  // 1- document.getElementById('id');
  // 2- document.getElementsByClassName('first');  
    // 返回的是 HTMLCollection  ->  伪数组，并没有 数组 那么多的 实例方法
  // 3- document.getElementsByTagName('div'); // TagName -> 标签名
    // 返回的是 HTMLCollection
  // 4- document.getElementsByName('yo'); // 通过 name 属性 进行查找
    // 返回的是 NodeList

  // 5- 以 CSS 选择器的形式 搜索 DOM 元素

  // 5 - 1：document.querySelector('.first');  // 只返回 第一个 命中 的 DOM 元素
  // 5 - 2：document.querySelectorAll('body > div'); // 返回的是 NodeList 形式

// -------------------------------
// 「改」

// 1. 改变 dom 标签内的 text：  dom.innerText  = '新的字符串'
    // 作用：以 '新的字符串' 「覆盖」 dom 之前的 字符串
  // var domSecond =  document.querySelector('#second');
  // domSecond.innerText = 'YO';


// 2. 在 DOM 内 ，「覆盖」新的 html 信息
  // dom.innerHTML  = '新的字符串'
var domSecond =  document.querySelector('#second');
domSecond.innerHTML = `
  <h1>YO</h1>
`;

</script>